<template>
	<div :class="prefixCls" :style="getWrapStyle">
		<Spin :spinning="loading" size="large" :style="getWrapStyle">
			<iframe :src="frameSrc" :class="`${prefixCls}__main`" ref="frameRef" @load="hideLoading"></iframe>
		</Spin>
	</div>
</template>
<script lang="ts">
import type { CSSProperties } from 'vue';
import { ref, unref, computed, defineComponent } from 'vue';
import { Spin } from 'ant-design-vue';
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
import { propTypes } from '@/utils/propTypes';
import { useDesign } from '@/hooks/web/useDesign';
import { useLayoutHeight } from '@/layouts/default/content/useContentViewHeight';

export default defineComponent({
	name: 'Iframe',
	components: { Spin },
	props: {
		frameSrc: propTypes.string.def(''),
	},
	setup() {
		const loading = ref(true);
		const topRef = ref(50);
		const heightRef = ref(window.innerHeight);
		const frameRef = ref<HTMLIFrameElement>();
		const { headerHeightRef } = useLayoutHeight();

		const { prefixCls } = useDesign('iframe-page');
		useWindowSizeFn(calcHeight, 150, { immediate: true });

		const getWrapStyle = computed((): CSSProperties => {
			return {
				height: `${unref(heightRef)}px`,
			};
		});

		function calcHeight() {
			const iframe = unref(frameRef);
			if (!iframe) {
				return;
			}
			const top = headerHeightRef.value;
			topRef.value = top;
			heightRef.value = window.innerHeight - top;
			const clientHeight = document.documentElement.clientHeight - top;
			iframe.style.height = `${clientHeight}px`;
		}

		function hideLoading() {
			loading.value = false;
			calcHeight();
		}

		return {
			frameRef,
			loading,
			prefixCls,
			getWrapStyle,
			hideLoading,
		};
	},
});
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-iframe-page';

.@{prefix-cls} {
	.ant-spin-nested-loading {
		position: relative;
		height: 100%;

		.ant-spin-container {
			width: 100%;
			height: 100%;
			padding: 10px;
		}
	}

	&__mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&__main {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: @component-background;
		border: 0;
		box-sizing: border-box;
	}
}
</style>
